<template>
	<div id="fundsManagement" class="fundsManagement same-change-oldstyle">
		<div class="same-head-box">
			<div class="saem-seat-box">
				<div class="saem-seat-left">
					<span>当前位置：</span>
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item>业绩管理</el-breadcrumb-item>
						<el-breadcrumb-item :to="{ path: '/fundsManagement' }">资金管理</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="saem-seat-right">
					<button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
					<!-- <button class="same-search-btns" @click="returnBack">返回</button> -->
				</div>
			</div>
			<div class="same-search-box">
				<div>
					<div class="same-search-left">
						<div class="same-left-one">
							<span class="same-search-span same-search-fisrt">结算日期：</span>
							<el-date-picker style="width:140px" v-model="date1" type="date" size="medium" value-format="yyyy-MM-dd"
								placeholder="开始日期">
							</el-date-picker>
							<div class="same-interval">至</div>
							<el-date-picker style="width:140px" v-model="date2" type="date" size="medium" value-format="yyyy-MM-dd"
								placeholder="结束日期">
							</el-date-picker>
						</div>
						<div class="same-left-one" v-if="!moveShow">
							<div class="same-left-zdshwo" :hidden="!moveBtn" @click="openMore">更多查询条件<i
									:class="[moveShow?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
							<el-button type="primary" size="medium" @click="findList()">搜索</el-button>
							<el-button type="info" size="medium" @click="reset()">重置</el-button>
						</div>
					</div>
					<div class="same-search-right"></div>
				</div>
				<!-- 更多搜索条件 -->
				<div>
					<div class="same-search-left new-sear-height" ref="leftHeight">
						<div class="same-left-one">
							<span class="same-search-span">订单类型：</span>
							<el-select v-model="chooseType" placeholder="请选择" @change='choosedropdown($event)' style="width: 140px;">
								<el-option v-for="item in stateoption" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</div>
						<div class="same-left-one" :class="[moveShow?'':'new-sear-opacity']">
							<div class="same-left-zdshwo" :hidden="!moveBtn" @click="openMore">收起更多查询条件<i
									:class="[moveShow?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
							<el-button type="primary" size="medium" @click="findList()">搜索</el-button>
							<el-button type="info" size="medium" @click="reset()">重置</el-button>
						</div>
					</div>
					<div class="same-search-right"></div>
				</div>
			</div>
		</div>

		<div class="statistic-wrapper">
			<div class="statistic-cell">
				<div class="money-wrapper">
					<span class="span-title">收入金额（元）</span>
					<span class="span-money">{{income_money|filterNumber}}</span>
					<el-popover placement="left" width="200" trigger="hover">
						<table border="0"  cellspacing="0" v-loading="loading" element-loading-text="拼命加载中"
							style="text-align: center; padding: 10px;">
							<tr>
								<th class="hoverPopshow"><span>业务类型</span></th>
								<th style="text-align: center"><span>金额</span></th>
							</tr>
							<tbody>
								<tr v-for="item in income_record" v-if="income_record.length>0">
									<td class="hoverPopshow">{{item.btype_name}}</td>
									<td style="text-align: center">{{item.money|filterNumber}}</td>
								</tr>
							</tbody>
						</table>
						<span v-if="income_record.length<=0" class="noneshow">暂无数据......</span>
						<i class="el-icon-question  icon-question" slot="reference"></i>
					</el-popover>
				</div>
				<div class="icon-wrapper">
					<i class="el-icon-sell"></i>
				</div>


			</div>

			<div class="statistic-cell">
				<div class="money-wrapper">
					<span class="span-title">支出金额（元）</span>
					<span class="span-money">{{pay_money|filterNumber}}</span>
					<el-popover placement="left" width="200" trigger="hover">
						<table border="0" cellspacing="0" v-loading="loading" element-loading-text="拼命加载中"
							style="text-align: center; padding: 10px;">
							<tr>
								<th class="hoverPopshow"><span>业务类型</span></th>
								<th style="text-align: center;"><span>金额</span></th>
							</tr>
							<tbody>
								<tr v-for="item in pay_record" v-if="pay_record.length>0">
									<td class="hoverPopshow">{{item.btype_name}}</td>
									<td style="text-align: center">{{item.money|filterNumber}}</td>
								</tr>
							</tbody>
						</table>
						<span v-if="pay_record.length<=0" class="noneshow">暂无数据......</span>
						<i class="el-icon-question  icon-question" slot="reference"></i>
					</el-popover>
				</div>
				<div class="icon-wrapper">
					<i class="el-icon-sold-out"></i>
				</div>
			</div>

			<div class="statistic-cell">
				<div class="money-wrapper">
					<span class="span-title">可提现金额（元）</span>
					<span class="span-money">{{account_balance | filterNumber }}</span>
					<span class='span-withdrawed'>已提现金额：{{ withdrawal_money | filterNumber }}</span>
				</div>
				<div class="withdraw-wrapper">
					<el-button v-if="payment_mode==1" class="min-width-btn" size="small" @click='goWithdraw()' round plain>提现</el-button>
					<el-button class="min-width-btn" size="small" @click='goWithdrawRecord()' round plain>提现记录</el-button>
				</div>
			</div>
		</div>


		<div class="head_box same-table-box">

			<div class="table_box">
				<h4 class="same-title-box">
					订单列表
				</h4>
				<div class="common-table-outer">
					<el-table class="common-table" v-loading="loading" header-cell-class-name="common-table-header-cell"
						:data="tableData" stripe>
						<el-table-column header-align="center" width="70" align="center" label="序号">
							<template slot-scope="scope">
								{{scope.$index+1+(pageNo-1)*pageSize}}
							</template>
						</el-table-column>
						<el-table-column align="center" width="90" prop="id" label="ID">
						</el-table-column>
						<el-table-column align="center" prop="create_time" label="结算日期">
						</el-table-column>

						<el-table-column align="center" prop="btype_name" label="类型">
						</el-table-column>
						<el-table-column align="center" :formatter="formatterRatio" prop="ratio" label="结算比列">
						</el-table-column>
						<el-table-column align="center" prop="address" label="收入/支出金额">
							<template slot-scope="scope">
								<span :class="scope.row.money<=0?'redColor':'greed_show'">{{scope.row.money|filterNumber}}</span>
							</template>
						</el-table-column>
						<el-table-column align="center" show-overflow-tooltip prop="note" label="备注">
						</el-table-column>
						<template slot="empty" v-if="isLoad">
							<div class="new-no-data-show">
								<img src="../../assets/images/no-data.png" alt="">
								<div>暂无相关数据</div>
							</div>
						</template>
					</el-table>
					<div class="same-page-inShow" v-if="tableData.length>0 && isLoad">
						<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page.sync="pageNo" :page-sizes="pageSizesList" :page-size="pageSize"
							layout="total, prev, pager, next, jumper, sizes" :total="totalDataNumber">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'informMsg',
		data: function () {
			return {
				loading: false, //加载动画
				pageNo: 1,
				pageSize: 15,
				pageSizesList: [15, 30, 40, 50],
				tableData: [], // 返回的结果集合
				totalDataNumber: 0, // 数据的总数,-----
				pay_money: '', // 支出金额
				income_money: '', // 收入金额
				withdrawal_money: '',//已提现金额
				account_balance: '', // 账户余额
				date1: '',
				date2: '',
				currentPage: 2, // 当前页数
				stateoption: [{
					value: '',
					label: '全部'
				}, {
					value: '2',
					label: '获得'
				}, {
					value: '1',
					label: '支出'
				}],
				chooseType: '', //选择类别
				income_record: [], // 收入明细
				pay_record: [], // 支出明细
				// balance_record: [], // 支出明细
				isLoad: false,

				moveBtn: false,//是否暂时更多查询条件按钮按钮 搜索条件控制
				moveShow: false,//是否开启动画
				scrollHeight: '',//需要监听的高度
        payment_mode:1
			}
		},
		computed: {

		},
		// 初始化执行
		created: function () {
			this.$emit('gitHidden', true);//是否隐藏底部版权 true 隐藏
			var that = this;
			if (that.date1 != null) {
				var start_time = that.date1;//开始时间
				var end_time = that.date2;//结束时间
			}
			var money_type = that.chooseType;//类型
			var page = that.pageNo; // 当前页
			var pageSize = that.pageSize; // 每页条数
			that.capitalList(page, pageSize, start_time, end_time, money_type); // 获取资金管理页面数据
		},

		inject: [
			'reload'
		],
		methods: {
			formatterRatio(row) {
				return `${row.ratio * 100}%`
			},

			RefreshFun() {
				// 调用reload方法，刷新整个页面
				this.reload()
			},
			//返回
			returnBack() {
				this.$router.back(-1);
			},
			//跳转提现记录
			goWithdrawRecord() {
				this.$router.push({ path: "/withdrawdeposit" });
			},
			//跳转提现
			goWithdraw() {
				this.$router.push({
					path: '/withdrawMoney'
				})
			},
			//重置
			reset() {
				this.date1 = "";
				this.date2 = "";
				this.chooseType = ""
				this.pageNo = 1;
				this.capitalList(this.pageNo, this.pageSize);
			},
			//搜索
			findList() {
				var that = this;
				if (that.date1 != null) {
					var start_time = that.date1;//开始时间
					var end_time = that.date2;//结束时间
				}
				var money_type = that.chooseType;//类型
				that.pageNo = 1;
				var page = that.pageNo; // 当前页
				var pageSize = that.pageSize; // 每页条数
				that.capitalList(page, pageSize, start_time, end_time, money_type);
			},
			//订单类型
			choosedropdown(Type) {
				this.chooseType = Type;
			},
			// 每页
			handleSizeChange(val) {
				var that = this;
				if (that.date1 != null) {
					var start_time = that.date1;//开始时间
					var end_time = that.date2;//结束时间
				}
				var money_type = that.chooseType;//类型
				that.pageNo = 1;
				var page = that.pageNo; // 当前页
				that.pageSize = val; // 当前每页显示条数
				that.capitalList(page, val, start_time, end_time, money_type); // 获取资金管理页面数据
			},
			// 分页
			handleCurrentChange(val) {
				var that = this;
				if (that.date1 != null) {
					var start_time = that.date1;//开始时间
					var end_time = that.date2;//结束时间
				}

				var money_type = that.chooseType;//类型
				var pageSize = that.pageSize; // 每页条数
				that.pageNo = val;
				that.capitalList(val, pageSize, start_time, end_time, money_type); // 获取资金管理页面数据
			},

			// 获取资金管理页面数据
			capitalList: function (page, pageSize, start_time, end_time, money_type) {
				this.loading = true; //打开loading动画
				this.isLoad = false; //是否加载
				var that = this;
				// ajax请求
				that.$post({
					url: 'Partner/Achievement/capitalRecordList',
					data: {
						page: page,
						row: pageSize,
						start_time: start_time ? start_time : '',
						end_time: end_time ? end_time : '',
						money_type: money_type,
						results: 1
					},
					success: (data) => {
						that.isLoad = true;
						that.loading = false; //关闭动画
						if (data.code == 1000) {
							that.tableData = data.data.data;
							that.pay_money = data.data.pay_money;// 支出金额
							that.income_money = data.data.income_money;// 收入金额
							that.withdrawal_money = data.data.withdrawal_money;
							that.account_balance = data.data.account_balance;// 账户余额
							that.totalDataNumber = Number(data.data.page.total_number); // 总的数据
							that.income_record = data.data.income_record;// 收入数据
							that.pay_record = data.data.pay_record;// 支出数据
              that.payment_mode = data.data.payment_mode;
							// that.balance_record = data.data.balance_record;
						}
					}
				})
			},

			//此处获取高度必须在dom元素创建完成之后才能获取
			gitHeight() {
				//  let clientHeight=this.$refs.leftHeight.clientHeight;
				let scrollHeight = this.$refs.leftHeight.scrollHeight;
				this.scrollHeight = scrollHeight;
				scrollHeight <= 30 ? this.moveBtn = false : this.moveBtn = true;

			},
			openMore() {
				this.moveShow = !this.moveShow;
				this.$refs.leftHeight.style.height = this.moveShow ? this.scrollHeight + 'px' : 0 + 'px';
			},
		},
		mounted() {
			this.gitHeight();
			//监听高度变化
			var that = this;
			window.addEventListener("resize", function () {
				let scrollHeight = that.$refs.leftHeight && that.$refs.leftHeight.scrollHeight ? that.$refs.leftHeight.scrollHeight : that.scrollHeight;
				that.scrollHeight = scrollHeight;
			});
		},
		watch: {
			// 如果 `scrollHeight` 发生改变，这个函数就会运行 此处是为了防止用户缩小屏幕导致页面显示不全
			scrollHeight: function (val) {
				this.$refs.leftHeight.style.height = this.moveShow ? this.scrollHeight + 'px' : 0 + 'px';
			}
		}
	}
</script>
<style>
	#fundsManagement {
		width: 100%;
		height: 100%;
		background: #fff;
	}

	#fundsManagement .el-range-editor.el-input__inner input {
		height: auto;
	}

	/* 头部搜索 */

	#fundsManagement .head_box {
		display: flex;
		flex-direction: column;
	}

	.jump_btn_style {
		border: none;
		width: 80px;
		height: 30px;
		color: #fff;
		font-weight: bold;
		font-size: 14px;
		background: #275485;
		margin-left: 10px;
		border-radius: 4px;
	}

	/*统计*/

	#fundsManagement .data_tj {
		display: flex;
		flex-direction: column;
	}

	#fundsManagement .table_box .same-title-box {
		padding-top: 10px;
	}

	#fundsManagement .dataBoxList {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 100px;
	}

	#fundsManagement .boxs_one {
		width: 32%;
		height: 100px;
		display: flex;
		height: 100px;
		border: 1px solid #DCDBD9;
		border-radius: 4px;
	}

	#fundsManagement .lefts_data {
		width: 30%;
		height: 100%;
		border-radius: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#fundsManagement .gl_color {
		background: #8F3E92;
		border: 1px solid #8F3E92;
	}

	#fundsManagement .bl_color {
		background: #275485;
		border: 1px solid #275485;
	}

	#fundsManagement .gr_color {
		background: #16903B;
		border: 1px solid #16903B;
	}

	#fundsManagement .right_data {
		padding: 0px 40px;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	#fundsManagement .span_st {
		color: #636261;
		margin-bottom: 10px;
		font-weight: bold;
		font-size: 16px;
	}

	#fundsManagement .p_st {
		color: #999999;
	}


	#fundsManagement .redColor {
		color: #FF6565;
	}

	#fundsManagement .greed_show {
		color: #399544;
	}

	#fundsManagement .paginShow {
		margin-top: 40px;
		display: flex;
		justify-content: flex-end;
	}


	#fundsManagement .noneshow {
		padding: 20px 0px;
		background: #fff;
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: center;
	}

	.btn-groups {
		padding: 10px 0;
		width: 100px;
		display: flex;
		flex-flow: column wrap;
		justify-content: space-around;
	}

	.hoverPopshow {
		text-align: left;
		display: flex;
		justify-content: flex-start;
		min-width: 100px;
	}
</style>

<style scoped>
	.statistic-wrapper {
		background-color: #FAFAFA;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0px 35px 20px;
	}

	.statistic-cell {
		background-color: #2C5586;
		color: #fff;
		flex: 1;
		margin-right: 20px;
		border-radius: 6px;
		height: 140px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: relative;
	}

	.icon-question {
		position: absolute;
		color: #fff;
		opacity: 0.8;
		font-size: 20px;
		right: 12px;
		top: 12px;
	}

	.statistic-wrapper div:last-child {
		margin-right: 0;
	}

	.money-wrapper {
		height: 100%;
		display: flex;
		flex-flow: wrap column;
		align-items: flex-start;
		justify-content: center;
	}

	.span-title {
		color: #FFFFFF;
		opacity: 0.5;
		font-size: 14px;
	}

	.span-money {
		font-size: 30px;
		margin-top: 5px;
	}

	.icon-wrapper {
		width: 80px;
		height: 80px;
		background: rgba(225, 225, 225, 0.1);
		border-radius: 50%;
		text-align: center;
		line-height: 100px;
	}

	.icon-wrapper i {
		font-size: 50px;
	}

	.withdraw-wrapper {
		display: flex;
		flex-flow: column wrap;
		align-items: center;
	}

	.min-width-btn {
		min-width: 90px;
		margin: 5px;
	}

	.span-withdrawed {
		font-size: 14px;
		opacity: 0.8;
	}
</style>
